<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 避免使用IE冲突 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 360切换到极速内核 -->
    <meta name="renderer" content="webkit">
    <!-- 手机搜索转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lte IE 8]>
    <meta http-equiv="Refresh" content="0;url=ie.html"/>
    <![endif]-->
    <title>叮叮财税</title>
    <link rel="stylesheet" href="static/css/common.css" type="text/css"/>
    <link rel="stylesheet" href="static/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="static/css/class.css" type="text/css"/>
    <link rel="stylesheet" href="static/css/slider.css" type="text/css"/>
    <link rel="shortcut icon" href="static/images/logo.jpg" type="image/x-icon"/>
    <link rel="stylesheet" href="static/css/font_333802_ypr9k5jwbv.css"/>
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>

    <script type="text/javascript" src="static/js/trace.js"></script>
    <script type="text/javascript" src="static/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="static/js/layer.js"></script>
    <script type="text/javascript" src="static/js/caishuib.js" defer="ture"></script>
    <script type="text/javascript" src="static/js/slider.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-carousel__container{
            height: 420px;
        }
        .regisers{
            color: #2b9dff;
        }
        .regisers:hover{
            cursor: pointer;
            color: #155bff;
        }
        .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
            border: none;
            height: 80px;
            line-height: 80px;
        }
        .el-menu.el-menu--horizontal{
            border:none;
        }
        .tab{
            width: 80px;
            height: 40px;
            background-color: #F3F5F7;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #8D8D8D;
        }
    </style>
</head>
<body>
<div id="app">
    <!------------------------顶部导航----------------------------------->
    <div class="header">
        <div class="header-box">
            <a href="#" class="logo"><img src="static/images/logo.jpg" width="119" height="70" alt="叮叮财税">
            <span> <img src="static/images/title.png"></span>
            </a>
            <ul id="header-nav">
                <li id="index"><a href="index.html">首页</a></li>
                <li id="course"><a href="study.html">课程</a></li>
                <li id="news"><a href="consult.html">资讯</a></li>
                <li id="download"><a href="download.html">下载</a></li>
                <li id="service"><a href="service.html">服务</a></li>
            </ul>
            <div class="login rt" id="user-info">
                <el-menu class="el-menu-demo" mode="horizontal" v-if="userPhone">
                    <el-submenu index="1">
                        <template slot="title">{{userPhone}}</template>
                        <el-menu-item index="" style="padding: 10px;width: 200px;height: 190px;position:relative;background: #fff">
                            <a href="home.html"  style="width: 100%;height: 100%;display: block;">
                                <div>{{userInfo.name}}{{userInfo.phone}}</div>
                                <div style="overflow: hidden;">
                                    <div class="tab">我的课程</div>
                                    <div class="tab">我的收藏</div>
                                    <div class="tab">个人中心</div>
                                    <div class="tab">咨询记录</div>
                                </div>
                            </a>
                            <div style="position:relative;z-index: 100;top: -34px;left: 90px;">
                                <el-button type="primary" size="small" @click="loginOut">安全退出</el-button>
                            </div>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
                <a href="javascript:;" class="ml-30 mr-30" id="loginBtn" @click="showLogin" v-if="!userPhone">
                    <i class="login-ico"></i>登录
                </a>

                <a href="javascript:;" id="logoutBtn" @click="showRegister" v-if="!userPhone">
                    <i class="regin-ico"></i>注册
                </a>
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="clearBoth"></div>
    </div>
    <!-- 弹框 -->
    <el-dialog
            :title="title"
            :visible.sync="loginDialogVisible"
            :close-on-click-modal="false"
            width="400px"
            center>
        <div>
            <el-form :model="form" :rules="rules" ref="form" label-width="60px">
                <el-form-item label="手机号" prop="phone">
                    <el-input  v-model="form.phone" placeholder="请输入手机号" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right">
                <span @click="isLogin = false" v-if="isLogin" class="regisers">去注册</span>
            </div>
            <div style="text-align: right">
                <span @click="isLogin = true" v-if="!isLogin" class="regisers">去登录</span>
            </div>
        </div>
        <span slot="footer" class="dialog-footer"  v-if="isLogin">
            <el-button @click="loginDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="submitCostomer('form')">{{loading?'登录中':'登录'}}</el-button>
        </span>
        <span slot="footer" class="dialog-footer"  v-if="!isLogin">
            <el-button @click="loginDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="submitCostomer('form')">{{loading?'注册中':'注册'}}</el-button>
        </span>
    </el-dialog>
    <!------------------------在线客服  / 回到顶部----------------------------------->
    <div class="tools">
        <div id="yyty-box"></div>
        <div style="height:36px;width:1px;margin-top:20px;margin-bottom:5px;">
            <div id="top" style="display: none;">
                <a href="javascript:;" style="margin-left:190px;margin-top:0px;"></a>
            </div>
        </div>
        <div id="help">
            <a href="#" target="_blank" style="margin-left:190px;margin-top:0px;background: transparent;" ></a>
        </div>
    </div><!------------------------轮播广告----------------------------------->
    <div>
        <el-carousel :interval="5000" arrow="hover" style="height: 420px;">
            <el-carousel-item v-for="(item,index) in bannerData" :key="item.id" style="height: 420px;">
               <el-image :src="item.url" alt="" :fit="fit" style="width: 100%;height: 100%"/>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="clearBoth"></div>
    <div class="bg">
        <div class="mainBox">
            <div class="reco-class">
                <div class="class-box class-reco class-box01">
                    <div class="titleTop">
                        <h2>推荐课程</h2>
                        <a href="study.html" class="more" title="查看更多">+</a>
                    </div>
                    <div class="class-all recommend">
                        <ul style="display: flex;justify-content: space-between">
                            <li class="" v-for="(item,index) in contentData" :key="index">
                                   <a :href="'coursedetail.html?id=' + item.id"  />
                                    <div class="img-box">
                                        <img :src="item.conten_url"/>
                                    </div>
                                    <h5 class="info">
                                        <span class="p-title">{{item.title}}</span>
                                    </h5>
                                    <div class="tips">
                                        <span>{{item.user_count}}人已学习</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!------------------------财税头条----------------------------------->
            <div class="csBox">
                <!--左侧 -->
                <div class="csLeft">
                    <div class="titleTop titleTop01">
                        <h2>财税头条</h2>
                        <a href="consult.html" class="more">+</a>
                    </div>
                <div class="csContent">
                        <div class="csTop" v-if="headData && headData.length>0">
                            <a :href="'detail.html?id=' + headData[0].id"><img :src="headData[0].banner_url" class="imgLt"/></a>
                            <div class="textRt">
                                <h5>
                                    <a :href="'detail.html?id=' + headData[0].id"  >{{headData[0].title}}</a>
                                </h5>
                                <p class="csText">{{headData[0].brief_info}}</p>
                                <span style="color:#999;font-size:12px;"></span>
                            </div>
                        </div>
                        <div class="csBottom">
                            <ul>
                             <li   class="" v-for="(item,index) in headData" :key="item.id" v-if="index>1 && index<=4">
                                 <a :href="'detail.html?id=' + item.id"  >
                                        <img :src="item.banner_url"/>
                                        <p style="margin-top: 2px;">{{item.title}}</p>
                                        <span style="color:#999;font-size:12px;">{{item.created_at.slice(0,10)}}</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>


                </div>
                <!--右侧 -->
                <div class="csRight">

                    <a href="" target="_blank"><img src="img/newchongzhi.jpg"></a>
                </div>
            </div>
            <!------------------------常见问题----------------------------------->
            <div class="question">
                <div class="titleTop titleTop02">
                    <h2>专家分享</h2>
                    <a href="consult.html" class="more">+</a>
                </div>
                <div class="qstLt">
                    <ul>
                        <li v-for="(item,index) in shareData" :key="item.id">
                            <a :href="'detail.html?id=' + item.id"  >
                                <img :src="item.banner_url">
                                <p class="qstTitle">{{item.title}}</p>
                                <p class="qstText" style="margin-bottom: 6px;">{{item.brief_info}}</p>
                                <span style="color:#999;font-size:12px;">{{item.created_at.slice(0,10)}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="qstRt">
                    <ul class="qstSort">
                        <li class="li"><a href="consult.html" class="sortTitle">申报类</a>
                            <ul>
                                <li v-for="item in shenData">
                                    <a :href="'detail.html?id=' + item.id"  >{{item.title}}</a>
                                </li>

                            </ul>
                        </li>
                        <li class="li"><a href="consult.html" class="sortTitle">财税类</a>
                            <ul>
                                <li v-for="item in caishuiData">
                                    <a :href="'detail.html?id=' + item.id"  >{{item.title}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <!--------------------底部------------------->
    <div class="clearBoth"></div>
    <div class="footer">
        <div class="footer-box">
            <div class="service-nav lf">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <a href="" target="_blank">如何注册</a>
                        <a href="" target="_blank">如何登陆</a>
                        <a href="" target="_blank">如何观看</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>
                        <a href="" target="_blank">服务咨询</a>
                        <a href="" target="_blank">联系我们</a>
                        <!--<a href="" target="_blank">服务网点</a>-->
                    </dd>
                </dl>
                <dl>
                    <dt>办税链接</dt>
                    <dd>
                        <a href="https://12366.chinatax.gov.cn/bsfw/onlinetaxation/main" target="_blank">网上办税</a>
                        <a href="http://www.chinatax.gov.cn/" target="_blank">国家税务总局</a>
                        <a href="http://www.sccz.gov.cn/" target="_blank">四川省财政厅</a>
                    </dd>
                </dl>
            </div>

            <div class="help rt">
                <div class="help-phone">
                    <i class="d-icon"></i>
                    电话客服：<strong>400-6666-6666</strong>
                </div>
                <div class="huiyuan">
                    <i class="h-icon"></i>
                    会员专线：<strong>028-666666666</strong>
                </div>
                <!--			<div class="online">
                                <a href="" target="_blank">
                                    <i class="xinxi"></i>
                                    服务咨询
                                </a>
                            </div>-->
            </div>
            <div class="barcode rt">
                <img src="img/contact.png"/>
                <p>关注叮叮财税</p>
            </div>
        </div>
        <div class="footer-copy">
            <div class="a-box">
                <a href="">隐私条款</a> |
                <a href="">网站地图</a> |
                <a href="">版权声明</a>
            </div>
            <p>&copy;2018 成都东软学院@丁艳</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        navClassSelect("#header-nav", "index", "current");
        initIndexBanner(); // 初始化banner
        //unitaryExperience(); // 一元体验黄橘会员
        //defaultLetDivCenter('.wxxc-model'); // 课程问卷调查
    });
</script>
</body>
<script type="text/javascript">
    var validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            var r = /^[^\u4e00-\u9fa5]+$/
            if(!r.test(value)){
                callback(new Error('密码不能为中文!'));
            }
            if (value.length < 6 ) {
                callback(new Error('密码长度在 6 到 18 个字符!'));
            }
            callback();
        }
    };
    var phoneValid = (rule, value, callback) => {
        let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
        if (!value) {
            callback(new Error('请输入手机号码'))
        }
        if (!phoneReg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
        }
        callback()
    };
    new Vue({
        el: '#app',
        data: {
            title:'',
            form: {
                phone:'',
                password:''
            },
            fit:['fill'],
            rules: {
                phone: [
                    { validator: phoneValid, trigger: 'change' }
                ],
                password: [
                    { validator: validatePass, trigger: 'change' }
                ]
            },
            isLogin:false,
            loading:false,
            loginDialogVisible:false,
            bannerData: [],
            contentData: [],
            headData: [],
            shareData: [],
            shenData: [],
            caishuiData: [],
            token: '',
            userPhone:'',
            userInfo:{},
            bannerHttp: 'http://xiaopengbest.cn/api/common/banner?type=index',
            keHttp: 'http://xiaopengbest.cn/api/express/course?recommend=1',
            headHttp: 'http://xiaopengbest.cn/api/express/news?type=2&chosed=1',
            shareHttp: 'http://xiaopengbest.cn/api/express/news?type=3&chosed=1',
            shenHttp: 'http://xiaopengbest.cn/api/express/news?type=5',
            caishuiHttp: 'http://xiaopengbest.cn/api/express/news?type=6',
            loginHttp: 'http://xiaopengbest.cn/api/user/session',
            registerHttp: 'http://xiaopengbest.cn/api/user/session/register',
        },
        watch: {
            loginDialogVisible:function (val) {
                if (!val) {
                    Object.keys(this.form).forEach(key => this.form[key] = '');
                    this.$refs['form'].resetFields();
                }
            },
            isLogin:function (val) {
                if (val) {
                    this.title='登录';
                } else{
                    this.title='注册';
                }
            }
        },
        created() {
            this.token = localStorage.getItem('token');
            if(this.token){
                this.token =(this.token.replace('"',''));
            }
            this.userPhone = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).phone:'';
            this.userInfo = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):'';
            this.getBannerList();
            this.getKCList();
            this.getHeadList();
            this.getShareList();
            this.getShenList();
            this.getCaishuiList();

        },
        methods: {
            loginOut() {
                localStorage.clear();
                window.location.reload();
            },
            showLogin() {
                this.title='登录';
                this.isLogin = true;
                this.loginDialogVisible = true;
            },
            showRegister() {
                this.title='注册';
                this.isLogin = false;
                this.loginDialogVisible = true;
            },
            submitCostomer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.isLogin){
                            this.toLogin();
                        } else {
                            this.toRegister();
                        }
                    } else {
                        return false;
                    }
                });
            },
            toLogin() {
                this.loading = true;
                axios.post(this.loginHttp, {
                        phone: this.form.phone,
                        password:this.form.password
                    }).then((res) => {
                        if (res.data.code == 200) {
                            this.loading = false;
                            this.$message({
                                type:'success',
                                message:'登录成功',
                                duration:1000
                            });
                            this.loginDialogVisible = false;
                            this.userPhone = res.data.data.phone;
                            this.userInfo = res.data.data;
                            localStorage.setItem('userInfo', JSON.stringify(res.data.data));
                            localStorage.setItem('token', JSON.stringify(res.data.data.api_token));
                            this.token = localStorage.getItem('token');
                        }
                    }).catch((err)=> {
                        this.loading = false;
                        this.$message({
                                message:err.response.data.msg,
                            type:'warning',
                            duration: 1000
                        });
                });
            },
            toRegister() {
                this.loading = true;
                axios.post(this.registerHttp, {
                        phone: this.form.phone,
                        password:this.form.password
                    }).then((res) => {
                        if (res.data.code == 200) {
                            this.loading = false;
                            this.$message({
                                type:'success',
                                message:'注册成功,去登陆',
                                duration:1000
                            });
                            this.isLogin = true;

                        }
                    }).catch((err)=> {
                        this.loading = false;
                        this.$message.warning(err.response.data.msg || "数据异常，请重试");
                });
            },

            getBannerList() {
                const self = this;
                axios.get(this.bannerHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.bannerData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            },
            getKCList() {
                const self = this;
                axios.get(this.keHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.contentData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            },
            getHeadList() {
                const self = this;
                axios.get(this.headHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {

                        self.headData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            },
            getShareList() {
                const self = this;
                axios.get(this.shareHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.shareData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            },
            getShenList() {
                const self = this;
                axios.get(this.shenHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.shenData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            },
            getCaishuiList() {
                const self = this;
                axios.get(this.caishuiHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            // 'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.caishuiData = res.data.data;
                    }).catch(function (res) {
                    console.log(res);
                });
            }
        }
    });
</script>
</html>
